<template>
	<view class="warp-zhenggfk">
		<u-form :model="form" ref="uForm">
			<view class="zhenggfk-upload">
				<view class="group-title">
					反馈图片：
				</view>
				<u-form-item :border-bottom="borderBottom" prop="fileList">
					<u-upload :action="action" :file-list="form.fileList" upload-text="现场拍照"></u-upload>
				</u-form-item>
			</view>
			<view class="zhenggfk-group">
				<view class="group-title">
					处理情况描述：
				</view>
				<view class="group-info">
					<u-form-item :border-bottom="borderBottom" prop="textVal">
						<u-input placeholder="存在事件:" v-model="form.textVal" type="textarea" border="true" height="200" />
					</u-form-item>
				</view>
			</view>
			<u-form-item :border-bottom="borderBottom" prop="radioVal">
				<u-radio-group v-model="form.radioVal">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled" active-color="#409eff">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-button :custom-style="customStyle" @click="submit">完成</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					borderBottom:false,
					//上传地址
					action: 'http://www.example.com/upload',
					radioList: [
						{
							name: '已处理',
							disabled: false
						},
						{
							name: '未处理',
							disabled: false
						}
					],
					fileList: [],
					customStyle:{
						background: '#409eff',
						color: '#fff',
						marginTop: '20rpx'
					},
					form: {
						fileList:[],
						textVal: '',
						radioVal: ''
					},
					rules: {
						fileList:[
							{ 
								required: true, 
								message: '请上传现场照片', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
						textVal: [
							{ 
								required: true, 
								message: '请输入情况描述', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
						radioVal: [
							{
								required: true,
								message: '请现在处理情况', 
								trigger: ['change','blur'],
							}
						]
					}
				}
			},
			methods: {
				submit(){
					this.$refs.uForm.validate(valid => {
						if (valid) {
							console.log('验证通过');
						} else {
							console.log('验证失败');
						}
					});
				}
			},
			onReady() {
				this.$refs.uForm.setRules(this.rules);
			}
			
		}
</script>

<style>
	.warp-zhenggfk{
		width: 100%;
		height: auto;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.zhenggfk-upload{
		width: 100%;
		height: auto;
	}
	.group-title{
		font-size: 32rpx;
		color: rgb(3,169,244);
		margin-bottom: 20rpx;
	}
</style>
